<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细信息</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="/css/reset.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="/css/base.css">
    <!-- 当前主页样式 -->
    <link rel="stylesheet" href="/css/good-details.css">
    <!-- 尾部样式 -->
    <link rel="stylesheet" href="/css/footer.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <link rel="shortcut icon" href="/icon/favicon.ico" type="image/x-icon">
    <!-- 轮播图 -->
    <!-- <script src="./js/slide.js"></script> -->
    <!-- layui -->
    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
    <script src="/layui-v2.6.8/layui/layui.js"></script>
</head>


<body>
<!-- 顶部导航条 -->
<th:block th:include="header"/>

<!-- 主要部分 -->
<div class="page">
    <!-- 有×叉 -->
    <div class="mi-details">
        <div class="login-notice" th:if="${session.CURRENT_MEMBER == null}">
            为方便您购买，请提前登录
            <a href="/login">
                立即登录
            </a>
        </div>
    </div>


    <!-- 弹性盒产品左右栏 -->
    <div class="product-box">
        <!-- 动态渲染区域 -->
        <!-- 左边轮播 -->
        <div class="layui-carousel" id="test1" lay-filter="test1">
            <div carousel-item="">
                <div th:each="att:${attachment}">
                    <img th:src="${att.pathView}" alt="" src="" width='720px' height='700px'>
                </div>
            </div>
        </div>
        <!-- 右边产品介绍 -->
        <div class="product-con">
            <h2 th:text="${product.name}"></h2>
            <p class="sale-decr" th:text="${product.info}"></p>
            <p class="company-info">小米自营</p>
            <p class="price-info">
                <span th:text="${product.price}"></span>
            </p>
            <div class="line"></div>
            <div class="product-address">
                <i class="iconfont icon-dingwei icon"></i>
                <div class="address-con">
                    <div>
                        <div class="address-info">
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海淀区</span>
                            <span>清河街道</span>
                            <a href="javascript;">修改</a>
                        </div>
                    </div>
                    <div class="storage">
                        <span>有现货</span>
                    </div>
                </div>
            </div>
            <div class="buychoies">
                <div class="title fs18">选择颜色</div>
                <ul class="clearfix">
                    <li th:title="${product.color}" class="active">
                        <a href="#" th:text="${product.color}"></a>
                    </li>
                </ul>
            </div>
            <div class="selected-list">
                <p class="sale-decr" th:text="${product.info}"></p>
                <div class="total-price" th:text="${'总计：' + product.price + '元'}"></div>
            </div>
            <div class="btn-box">
                <div class="putin">
                    <button type="button" class="addCart"><a href="javascript:;">加入购物车</a></button>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="footer"/>


<!--引入js -->
<!-- <script src="./js/floor.js"></script> -->
<script src="/js/footer.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/template-web.min.js"></script>
<script src="/layui-v2.6.8/layui/layui.js"></script>
<script src="/js/lay-module/common/common.js"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    layui.use(['carousel', 'layer'], function () {
        let carousel = layui.carousel,
                   $ = layui.jquery,
               layer = layui.layer;
        carousel.render({
            elem: '#test1',
            width: '720px',
            height: '700px',
            interval: 3000
        });

        // 当前商品的ID
        let productId = '[[${product.id}]]';

        // 给加入购物车按钮绑定事件
        $(".addCart").on("click", function () {
            $.post("/product/cart", {productId : productId}, function () {
                layer.msg("加入成功！", {
                    icon: 1,
                    time: 1200
                });
            });
        });

    });
</script>


<!-- 工具栏右侧的 -->
<div class="home-tool-bar">
    <a href="javascript:void(0);" class="item">
        <div class="icon">
            <img src="/img/w1.png" alt="">
        </div>
        <span class="text">
                手机APP
            </span>
        <div class="pop-content">
            <img src="/img/erweima.png" alt="">
            <span class="decs">
                    扫码领取新人百元礼包
                </span>
        </div>
    </a>
    <a href="./favorite.html" class="item">
        <div class="icon">
            <img src="/img/w2.png" alt="">
        </div>
        <span class="text">
                个人中心
            </span>
    </a>
    <a href="javascript:void(0);" class="item">
        <div class="icon">
            <img src="/img/w3.png" alt="">
        </div>
        <span class="text">
                售后服务
            </span>
    </a>
    <a href="javascript:void(0);" class="item">
        <div class="icon">
            <img src="/img/w4.png" alt="">
        </div>
        <span class="text">
                人工客服
            </span>
    </a>
    <a href="./cart.html" class="item">
        <div class="icon">
            <img src="/img/w5.png" alt="">
        </div>
        <span class="text">
                购物车
            </span>
    </a>

</div>

</body>


</html>